import Highcharts from 'highcharts/highstock';
import {resp} from './resp.js'

/**
 * K线图配置
 * @param id id名称
 * @param categories  x轴数据
 * @param series Y轴数组数据
 */
export const kChartInit = (id, categories, series) => {

    Highcharts.setOptions({
        lang: {
            rangeSelectorZoom: ''
        }
    });

    if (resp.code !== 1) {
        alert('读取股票数据失败！');
        return false;
    }
    const data = resp.data;
    // console.log('d', data)
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [[
            'week',                         // unit name
            [1]                             // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6]
        ]],
        i = 0;
    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);
        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ]);
    }

    const length = data.length;

    // create the chart
    var chart = Highcharts.stockChart(id, {
        rangeSelector: {
            allButtonsEnabled: false,
            enabled: false,
        },
        chart: {
            // animation: false,
            panning: false, // 禁止放大
            pinchType: '', // 禁用手势操作
            style: {
                fontSize: '12px',
            }
        },
        colors: ['#f7332d', '#00af41'],
        credits: {enabled: false},
        scrollbar: {enabled: false},
        navigator: {enabled: false},
        accessibility: {
            enabled: false
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        tooltip: {
            split: false,
            shared: true,
        },
        plotOptions: {
            series: {
                animation: false,
                maxPointWidth: length < 5 ? 10 : null,
            }
        },
        xAxis: {
            // dateTimeLabelFormats: {
            //     millisecond: '%H:%M:%S.%L',
            //     second: '%H:%M:%S',
            //     minute: '%H:%M',
            //     hour: '%H:%M',
            //     day: '%m-%d',
            //     week: '%m-%d',
            //     month: '%y-%m',
            //     year: '%Y'
            // },
            tickLength:0,
            lineWidth: 0,
            labels: {
                // staggerLines: 1,
                format: '{value:%Y/%m/%d}',
                y: 20,
                style: {
                    fontSize: "12px",
                    color: 'rgba(165, 166, 173, 1)',
                },
                step:3,
            },
            // tickPixelInterval:90
        },
        yAxis: [
            {
                gridLineColor: '#F9F9FA',
                labels: {
                    style: {
                        fontSize: "12px",
                        color: 'rgba(165, 166, 173, 1)',
                    },
                    align: 'right',
                    x: -3
                },
                resize: {
                    enabled: true
                },
                opposite: false,
            },
        ],
        series: [
            {
                type: 'candlestick',
                name: '平安银行',
                color: 'green',
                lineColor: 'green',
                upColor: 'red',
                upLineColor: 'red',
                tooltip: {},
                navigatorOptions: {
                    color: Highcharts.getOptions().colors[0]
                },
                data: ohlc,
                dataGrouping: {
                    units: groupingUnits
                },
                id: 'sz'
            },
        ]
    });

    // console.log('ohlc', ohlc.slice(0, 5))
    // console.log('groupingUnits', groupingUnits.slice(0, 5))

}